<template>
  <div class="cash">
    <Card>
      <p slot="title">银行列表</p>
      <div class="search-con search-con-top">
        <i-input  size="large" class="search-input" placeholder="银行名称"></i-input>
        <i-input  size="large" class="search-input" placeholder="开户名"></i-input>
        <i-input  size="large" class="search-input" placeholder="银行卡号"></i-input>
        <Button  size="large" class="search-btn com-btm">
          搜索</Button>
      </div>
      <div>
        <Button size="large" class="add-btn com-btm" @click="addbtn">
          新增</Button>
      </div>
     <i-table :columns="allColumns" :data="newData"></i-table>
      <div style="margin-top: 10px;">
        <Page size="small" :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="pagesize"
          show-total show-sizer show-elevator></Page>
      </div>
    </Card>
  </div>

</template>
<script>

  let testData = {
    histories: [{
        id: '14',
        bankname: '银行',
        accountname: '二',
        banknumber: '123',
        blance: '10000',
        persion: '人工003',
        staus: '开启',
        isdefault: 0,
      },
      {
        id: '15',
        bankname: '招商银行',
        accountname: '二硕',
        banknumber: '12345689',
        blance: '10000',
        persion: '人工003',
        staus: '开启',
        isdefault: 1,
      },
      {
        id: '16',
        bankname: '招商银行',
        accountname: '二硕',
        banknumber: '12345689',
        blance: '10000',
        isdefault: 1,
        persion: '人工003',
        staus: '开启',
      }, {
        id: '15',
        bankname: '招商银行',
        accountname: '二硕',
        banknumber: '12345689',
        blance: '10000',
        isdefault: '是',
        persion: '人工003',
        staus: '开启',
      },
      {
        id: '16',
        bankname: '招商银行',
        accountname: '二硕',
        banknumber: '12345689',
        blance: '10000',
        isdefault: '是',
        persion: '人工003',
        staus: '开启',
      }, {
        id: '15',
        bankname: '招商银行',
        accountname: '二硕',
        banknumber: '12345689',
        blance: '10000',
        isdefault: '是',
        persion: '人工003',
        staus: '开启',
      }, {
        id: '16',
        bankname: '招商银行',
        accountname: '二硕',
        banknumber: '12345689',
        blance: '10000',
        isdefault: '是',
        persion: '人工003',
        staus: '开启',
      }, {
        id: '15',
        bankname: '招商银行',
        accountname: '二硕',
        banknumber: '12345689',
        blance: '10000',
        isdefault: '是',
        persion: '人工003',
        staus: '开启',
      }, {
        id: '16',
        bankname: '招商银行',
        accountname: '二硕',
        banknumber: '12345689',
        blance: '10000',
        isdefault: '是',
        persion: '人工003',
        staus: '开启',
      }, {
        id: '15',
        bankname: '招商银行',
        accountname: '二硕',
        banknumber: '12345689',
        blance: '10000',
        isdefault: '是',
        persion: '人工003',
        staus: '开启',
      },
      {
        id: '16',
        bankname: '招商银行',
        accountname: '二硕',
        banknumber: '12345689',
        blance: '10000',
        isdefault: '是',
        persion: '人工003',
        staus: '开启',
      },
      {
        id: '17',
        bankname: '招商银行',
        accountname: '二硕',
        banknumber: '12345689',
        blance: '10000',
        isdefault: '是',
        persion: '人工003',
        staus: '开启',
      },
    ]
  
  };
  const isDefault = {
    0: {
      value: 0,
      name: '取消默认',
      name1:'是',
      color:'#FFB800',
    },
    1: {
      value: 1,
      name: '设为默认',
      name1:'否',
      color: '#009688'
    }
  };
  export default {
    name: 'cash_manage_page',
    data() {
      return {
        ajaxHistoryData: [],
        // 初始化信息总条数
        dataCount: 0,
        // 每页显示多少条
        pageSize: 5,
        page: 1, //当前页
        allColumns: [
          {
            type: 'selection',
            width: 50,
            align: 'center'
          },
          {
            title: '编号',
            key: 'id'
          },
          {
            title: '银行名称',
            key: 'bankname'
          },
          {
            title: '开户名称',
            key: 'accountname'
          },
          {
            title: '银行卡号',
            key: 'banknumber'
          },
          {
            title: '余额',
            key: 'blance'
          },
          {
            title: '是否默认',
            key: 'isdefault',
            render: (h, params) => {
              return h('Tag', {
                slot: 'context',
                props: {
                  color: this.formatStatus(params.row.isdefault, isDefault).color
                }
              }, this.formatStatus(params.row.isdefault, isDefault).name1)
            }
          },
          {
            title: '操作人',
            key: 'persion'
          },
          {
            title: '状态',
            key: 'staus',

          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            filter: {
              type: 'Select',
              option: isDefault
            },
            render: (h, params) => {
              return h("div", [
                h(
                  "Button", {
                    props: {
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      backgroundColor: "#009688",
                      color: 'white'
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: 'edit_news_page'
                        })
                        // this.show(params.index)
                        // e.stopPropagation(); //阻止冒泡
                        // alert('查看');
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  'Tag', {
                    slot: 'context',
                    props: {
                      color: this.formatStatus(params.row.isdefault, isDefault).color
                    },
                  on: {
                    click: () => {
                      alert('查看');
                    }
                  }
                  },
                  this.formatStatus(params.row.isdefault, isDefault).name)
              ]);
            }

          }
        ],
       
        newData: [],
      };
    },

    methods: {
      // 是否默认的状态
      formatStatus(value, status) {
        return status[value] || {value: '', name: ''};
      },
      // 新增
      addbtn() {
        this.$router.push({
          name: 'add_news_page'
        })
      },
      // 获取历史记录信息
      handleListApproveHistory() {
        // 保存取到的所有数据
        this.ajaxHistoryData = testData.histories;
        this.dataCount = testData.histories.length;
        // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
        if (testData.histories.length < this.pageSize) {
          this.newData = this.ajaxHistoryData;
        } else {
          this.newData = this.ajaxHistoryData.slice(0, this.pageSize);
        }
      },
      // 点击切换页面
      changepage(index) {
        //需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
        let _start = (index - 1) * this.pageSize;
        //需要显示结束数据的index
        let _end = index * this.pageSize;
        //截取需要显示的数据
        this.newData = this.ajaxHistoryData.slice(_start, _end);
        //储存当前页
        this.page = index;
      },
      //每页显示的数据条数
      pagesize(index) {
        let _start = (this.page - 1) * index;
        let _end = this.page * index;
        this.newData = this.ajaxHistoryData.slice(_start, _end);
        //实时获取当前需要显示的条数
        this.pageSize = index;
      }
    },
    created() {
      this.handleListApproveHistory();
    }
  }
</script>

<style lang="less">
  @import './cash-manage.less';

  input:focus {
    outline: none !important;
  }

  input {
    outline: none;
    border: 0;
  }
</style>
